@extends('admin.common.main')
@section('header')
    <script type="text/javascript" charset="utf-8" src="/ueditor_4.3/ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="/ueditor_4.3/ueditor.all.js"> </script>

    <link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css">


@endsection

@section('content')
    @include('admin.common.error'){{--如果出现错误--}}
        <form action="{{route('admin.article.store')}}" method="post" class="form form-horizontal" id="form-member-add">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>标题：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="title" name="title">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="desn" name="desn">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章封面：</label>
                <div class="formControls col-xs-8 col-sm-9">


                    <div id="uploader" class="wu-example">
                        <!--用来存放文件信息-->
                        <div id="thelist" class="uploader-list"></div>
                        <div class="btns">
                            <div id="picker">选择文件</div>
                            <img src="" alt="" hidden width="200" height="100">
                            <input type="hidden" value="" name="pic" id="pic">
                        </div>

                    </div>


                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章作者：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="author" name="author">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>详细地址：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="address" name="address">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea id="body" name="body"> </textarea>

                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>

@endsection



@section('js')
    <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <!--引入JS-->
    <script type="text/javascript" src="/webuploader-0.1.5/webuploader.js"></script>


    <!-- 实例化编辑器 -->


    <script type="text/javascript">
        var ue = UE.getEditor('body');


        var uploader = WebUploader.create({
            auto: true,
            // 本地 swf文件路径
            swf:"/webuploader-0.1.5/js/Uploader.swf'",
            formData:{_token:"{{csrf_token()}}" },
            threads: 4,   //允许单次最大上传数量 ，//超出后 完成之前任务会继续上传
            // 文件接收服务端。
            server: "{{route('admin.article.localUploadFile')}}",

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

        uploader.on( 'uploadSuccess', function( file,ret ) {
           /* console.log(ret.data.file)*/
            $('#picker').next('img').attr('src',ret.data.file).show();
            $('#pic').val(ret.data.file);
        });


        $("#form-member-add").validate({
            rules:{
                title:{
                    required:true,

                },
                desn:{
                    required:true,

                },
                author:{
                    required:true,

                },

                body:{
                    required:true,

                }

            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){

                console.log(form)
                form.submit();

            }
        });
    </script>


@endsection
